<template>
  <div>
    <nav-top class="nav"
             Licon="back"
             @callback="$router.go(-1)"></nav-top>
    <div class="edit gl-content">
      <div class="content ">
        <form class="myform">
          <div>
            <p class="textC"><span class="label">账号</span>:</p>
            <input type="text"
                   v-model="account"
                   disabled />
          </div>
          <div>
            <p class="textC"><span class="label">姓名</span>:</p>
            <input type="text"
                   v-model="uname" />
          </div>
          <div>
            <p class="textC"><span class="label">手机号</span>:</p>
            <input type="text"
                   v-model="uphone" />
          </div>
          <div>
            <p class="textC"><span class="label">状态</span>:</p>
            <p>
              <i class="radio_type"
                 :class="{ active: isActive == 1 }"
                 @click="changeActive(1)" /><span class="state"
                    @click="changeActive(1)">启用</span>
              <i class="radio_type"
                 :class="{ active: isActive == 2 }"
                 @click="changeActive(2)" /><span class="state"
                    @click="changeActive(2)">禁用</span>
            </p>
          </div>
          <div class="quotasVip">
            <p class="textC"><span class="label">会员额度</span>:</p>
            <div class="quotasVip_content">
              <div class="reduce">
                <span>-</span>
                <input type="text"
                       v-model="reduction"
                       class="ipt"
                       :disabled="isReduction"
                       @blur="str = '-'" />
              </div>
              <span class="quota">{{ quotas }}</span>
              <div class="reduce">
                <span>+</span>
                <input type="text"
                       v-model="addNum"
                       class="ipt"
                       :disabled="isAddNum"
                       @blur="str = '+'" />
              </div>
            </div>
          </div>
          <div>
            <p class="textC"><span>备注:</span></p>
          </div>
          <div class="tarea">
            <textarea v-model="textArea"></textarea>
          </div>
        </form>
        <div class="btn">
          <button class="cancel"
                  @click="$router.go(-1)">取消</button>
          <button class="submission"
                  @click="sub">提交</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex'
export default {
  name: 'Edit',
  components: {},
  data() {
    return {
      isActive: 1, // 判断选中状态
      quotas: 123, // 会员额度
      account: '', // 账号
      uname: '', // 姓名
      uphone: '', // 手机号
      textArea: '', // 备注
      reduction: 0,
      addNum: 0,
      isReduction: false, // 减
      isAddNum: false, // 加
      str: ''
    }
  },
  computed: {
    ...mapGetters(['teamItem', 'uid'])
  },
  watch: {
    reduction() {
      if (this.reduction == '' || this.reduction == 0) {
        this.isAddNum = false
        // console.log(1)
      } else {
        // console.log(0)
        this.isAddNum = true
      }
      if (this.reduction < 0) {
        this.reduction = 0
      }
    },
    addNum() {
      if (this.addNum == '' || this.addNum == 0) {
        this.isReduction = false
      } else {
        this.isReduction = true
      }
      if (this.addNum < 0) {
        this.addNum = 0
      }
    }
  },
  methods: {
    // 状态
    changeActive(num) {
      // console.log(num);
      this.isActive = num
    },
    // 加减
    changeNum(str) {
      if (str == '-') {
        if (this.quotas == 0) {
          this.quotas = 0
        } else if (this.reduction) {
          this.quotas = this.quotas - Number(this.reduction)

        //   console.log('-')
        }
        // if (this.reduction == '' && !this.isReduction) {
        //   this.$toast({
        //     message: '值不能为空或0',
        //     duration: 500
        //   })
        // }
      }
      if (str == '+') {
        if (this.addNum) {
          this.quotas = this.quotas + Number(this.addNum)
        //   console.log('+')
        }
        // if (this.addNum == '' && !this.isAddNum) {
        //   this.$toast({
        //     message: '值不能为空或0',
        //     duration: 500
        //   })
        // }
      }
    },
    // 提交
    sub() {
      this.changeNum(this.str)
      // 判断手机号码
      let isPhone = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
      if (isPhone.test(this.uphone)) {
        // 因为额度为0提交不了，所以需要判断
        if (this.quotas == this.teamItem.info.vip_num) {
          this.subData()
        } else {
          this.subQuotas()
        }
      } else {
        this.$toast({
          message: '请输入正确手机号码',
          duration: 500
        })
      }
    },
    // 提交基本数据
    subData() {
      let params = {
        id: this.teamItem.info.id,
        name: this.uname,
        phone: this.uphone,
        status: this.isActive,
        remark: this.textArea
      }
      let times
      clearTimeout(times)
      this.Http.editInfo(params)
        .then(res => {
          // console.log(res);
          this.$toast({
            message: '提交成功',
            duration: 500
          })
          times = setTimeout(() => {
            this.$router.push('/admin/team/index')
          }, 600)
        })
        .catch(err => {
          // console.log(err);
        })
    },
    // 提交额度
    subQuotas() {
      let params2 = {
        member_id: this.uid,
        proxy_id: this.teamItem.info.proxy_id,
        vip_num: this.quotas - this.teamItem.info.vip_num
      }
      //  console.log(params2);
      this.Http.vipAllot(params2)
        .then(res => {
          // console.log(res);
          this.subData()
        })
        .catch(err => {
          // console.log(err);

          if (err.code == '10325') {
            this.$toast({
              message: err.msg,
              duration: 1000
            })
            this.quotas = this.teamItem.info.vip_num // 会员额度
            this.addNum = 0
          }
        })
    }
  },
  created() {},
  mounted() {
    // console.log(this.teamItem);
    this.account = this.teamItem.info.username // 账号
    this.uname = this.teamItem.info.name // 姓名
    this.uphone = this.teamItem.info.phone // 手机号
    this.textArea = this.teamItem.info.remark // 备注
    this.isActive = this.teamItem.info.status // 状态码
    this.quotas = this.teamItem.info.vip_num // 会员额度

    // console.log(this.uid)
  }
}
</script>
<style lang="less" scoped>
.edit {
  padding-top: 0px;
  padding-bottom: 71px;
  min-height: calc(100vh - 175px);
}
.content {
  margin: 0 auto;
  width: 678px;
  height: 892px;
  background-color: #fff;
  box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.1);
  border-radius: 20px;

  .myform {
    box-sizing: border-box;
    padding: 0 34px;
    font-size: 34px;
    div {
      display: flex;
      // justify-content: space-between;
      align-items: center;
      line-height: 87px;
      // border-bottom: 1px solid rgba(236, 236, 236, 1);
      .textC {
        font-size: 34px;
        // width: 148px;
        font-weight: 500;
        font-family: PingFang SC;
        color: rgba(119, 119, 119, 1);
        padding-right: 30px;
        // .label {
        //   display: inline-block;
        //   width: 146px;
        // }
        .label {
          width: 146px;
          text-align: justify;
          text-align-last: justify;
        }
      }

      input {
        max-width: 436px;
        height: 52px;
        font-size: 34px;
        color: #222222;
        border: 1px solid rgba(236, 236, 236, 1);
      }
      input:disabled {
        color: #222222;
        cursor: default;
        background-color: #fff;
      }
      p {
        line-height: 87px;
        display: flex;
        align-items: center;
        font-size: 0;
        button {
          width: 106px;
          height: 48px;
          background: rgba(240, 242, 245, 1);
          border-radius: 24px;
          font-size: 34px;
          font-family: PingFang SC;
          font-weight: 500;
          color: rgba(153, 153, 153, 1);
          margin-right: 40px;
        }

        .radio_type {
          display: block;
          width: 30px;
          height: 30px;
          border: 1px solid rgba(153, 153, 153, 1);
          border-radius: 50%;
          margin-right: 10px;
        }
        .state {
          font-size: 34px;
          font-family: PingFang SC;
          font-weight: 500;
          color: rgba(34, 34, 34, 1);
          padding-right: 42px;
        }
        .active {
          width: 30px;
          height: 30px;
          border: 1px solid rgba(20, 200, 255, 1);
          position: relative;
        }
        .active::before {
          content: '';
          display: block;
          width: 22px;
          height: 22px;
          background: rgba(20, 200, 255, 1);
          border-radius: 50%;
          margin-top: 4px;
          margin-left: 4px;
          // position: absolute;
          // top: 50%;
          // left: 50%;
          // transform: translate(-50%, -50%);
        }
      }
    }
    .quotasVip {
      line-height: 104px;
    }
    .quotasVip_content {
      line-height: 87px;
      display: flex;
      align-items: center;
      font-size: 0;
      .reduce {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 140px;
        height: 48px;
        line-height: 48px;
        background: rgba(240, 242, 245, 1);
        border-radius: 24px;
        // text-align: center;
        color: #999;
        font-size: 40px;
        span {
          line-height: 48px;
          display: inline-block;
          padding: 0 10px 1px 20px;
          vertical-align: middle;
        }
        .ipt {
          width: 60px;
          height: 100%;
          background: rgba(240, 242, 245, 1);
          border: none;
          vertical-align: middle;
        }
      }
      .quota {
        font-size: 34px;
        display: inline-block;
        padding: 0 11px;
      }
    }
    .tarea {
      margin: 0 auto;
      textarea {
        width: 620px;
        height: 170px;
        resize: none;
        font-size: 34px;
        border: 1px solid rgba(236, 236, 236, 1);
        border-radius: 6px;
      }
    }
  }
  .btn {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 40px;
    button {
      width: 290px;
      height: 90px;
      border-radius: 20px;
      font-size: 32px;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
    }
    .cancel {
      background: linear-gradient(
        -83deg,
        rgba(255, 133, 122, 1),
        rgba(255, 81, 66, 1)
      );
      box-shadow: 0px 7px 12px 0px rgba(255, 117, 105, 0.4);
    }
    .submission {
      background: linear-gradient(
        -83deg,
        rgba(20, 200, 255, 1),
        rgba(2, 151, 255, 1)
      );
      box-shadow: 0px 7px 12px 0px rgba(79, 184, 254, 0.4);
    }
  }
}
.nav {
  background-color: #f7f8fa;
}
</style>
